$default-font-size : 14px; // 基础文字大小

// 禁止选择文字
.easy-prohibit-to-choose {
  user-select: none;
}

// 弹性盒子水平垂直居中 适用父元素上
.easy-flex-center {
  display        : flex;
  align-items    : center;
  justify-content: center;
}

// 硬件加速
.easy-scroll-hardware {
  transform          : translateZ(0);
  transform-style    : preserve-3d;
  backface-visibility: hidden;
  perspective        : 1000
}

// scroll-view
.easy-scroll-view {
  position                  : relative;
  width                     : 100%;
  height                    : 100%;
  overflow                  : auto;
  -webkit-overflow-scrolling: touch;
  font-size                 : $default-font-size;
  color                     : #333;

  // 下拉刷新盒子
  .easy-scroll-down {
    position: relative;
    height  : 0;
    overflow: hidden;

    // 包裹着下拉刷新内容
    .easy-scroll-down-inner {
      height: 100%;

      // 下拉刷新圈圈
      .easy-scroll-down-inner-refresh {
        transform: rotate(-90deg);

        // 圈圈滚动
        &.easy-scroll-down-inner-refreshing {
          transition: transform 20s linear;
        }
      }

      // 下拉刷新文字
      .easy-scroll-down-inner-text {
        margin-left: 5px;
        font-size  : $default-font-size;
      }
    }
  }

  // 内容
  .easy-scroll-body {
    position: relative;
  }

  // 上拉加载盒子
  .easy-scroll-up {
    padding        : 15px 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 20px;
    visibility     : hidden;

    // 上拉加载文字
    .easy-scroll-up-load-text {
      margin-left: 5px;
      font-size  : $default-font-size;
    }
  }

  // 侧边栏
  .easy-scroll-side {
    position  : fixed;
    z-index   : 1000;
    transition: .3s;

    // 侧边按钮
    .easy-scroll-side-button {
      position        : relative;
      user-select     : none;
      padding         : 0;
      display         : block;
      width           : 50px;
      height          : 50px;
      border          : 1px solid rgba(74, 74, 74, 0.6);
      border-radius   : 4px;
      outline         : transparent;
      background-color: rgba(156, 154, 154, 0.8);
      margin-top      : 10px;
    }

    // 可拖动按钮
    .easy-scroll-side-button-drag {
      animation: joggle 300ms linear infinite;
    }
  }
}

// 可拖动按钮动画
@keyframes joggle {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(0);
  }

  75% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0);
  }
}